
import React,{Component} from 'react'
import { Input, Button, Card, Row,Dropdown,Menu} from 'antd'
import { CloseOutlined } from '@ant-design/icons'
import activityTagOperation from 'config/activityTagOperation'
import { inject, observer } from 'mobx-react'
const {TextArea} = Input
const {judgeData,compareData,revertData} = activityTagOperation
/**
 * 名称：活动标签配置画布
 * 描述：活动标签配置画布
 * 调用：activity-tag
 * 输入： 
 * 时间：20220401
 */
 @inject("tagStore")
 @observer  
 class ActivityCardCanvas extends Component{
    
    /**
     * 中间画栏上方“是否”按钮选中
     * 描述：选中一个值后会在画栏的标签上添加操作按钮
     * @param {*} key 
     */
     onJudgeSelect = (key) => {
        const {tagStore} = this.props
        let selectedOperationAboveEditArea = judgeData.find(item=>item.key === key)
        tagStore.setUsedTagByOperation("judge",selectedOperationAboveEditArea.sign)
        
    }
    /**
     * 中间画栏上方“比较”按钮选中
     * 描述：选中一个值后会在画栏的标签上添加操作按钮
     * @param {*} key 
     */
    onCompareSelect = (key) => {
        const {tagStore} = this.props
        let selectedOperationAboveEditArea = compareData.find(item=>item.key === key)
        tagStore.setUsedTagByOperation("compare",selectedOperationAboveEditArea.sign)
        
    }
    /**
     * 中间画栏上方“枚举”按钮选中
     * 描述：选中一个值后会在画栏的标签上添加操作按钮
     * @param {*} key 
     */
     onEnumSelect = () => {
        const {tagStore} = this.props
        tagStore.setUsedTagByOperation("enum","in")
        
    }
    /**
     * 中间画栏里面标签的值域改变
     * 描述：值域改变后会在右侧已选标签栏目改变对应标签的值
     * @param {*} key 
     */
    onInputChanged = (item) => {
        const {tagStore} = this.props
        let value = item.target.value
        tagStore.setUsedTagByInput(value)
        
    }
    /**
     * 中间画栏里面标签删除
     * 描述：无
     * @param {*} key 
     */
    onDelete = (key) => {
        const {tagStore} = this.props
        
        tagStore.setUsedTagByDelete(key) 
    }

    onRevert = () => {
        const {tagStore} = this.props
        let selectedTagInEditAreaIndex = tagStore.usedTags.findIndex(item=>item.key === tagStore.selectedKey)
        let selectedTagInEditArea = tagStore.usedTags[selectedTagInEditAreaIndex]
        
        let selectedOperationAboveEditArea = judgeData.find(item=>item.sign === selectedTagInEditArea.operation)
        if(selectedOperationAboveEditArea !== undefined){
            let revertSign = revertData.find(item => item.from === selectedOperationAboveEditArea.sign).to
            tagStore.setUsedTagByOperation("judge",revertSign)
            return
        } 
        selectedOperationAboveEditArea = compareData.find(item=>item.sign === selectedTagInEditArea.operation)
        
        if(selectedOperationAboveEditArea !== undefined){
            
            let revertSign = revertData.find(item => item.from === selectedOperationAboveEditArea.sign).to
            tagStore.setUsedTagByOperation("compare",revertSign)
            return
        }

        let revertSign = selectedTagInEditArea.operation === 'in'?'not in':'in'
        tagStore.setUsedTagByOperation("enum",revertSign)

    }
    render(){
        const {tagStore} = this.props
        const {usedTags,selectedKey} = tagStore
        let judgeDropMenu = (<Menu onClick={(item)=> this.onJudgeSelect(item.key)} >
                    {judgeData.map(item=><Menu.Item  key={item.key}>{item.label}</Menu.Item>)}</Menu>)
        let compareDropMenu = (<Menu onClick={(item)=> this.onCompareSelect(item.key)}>
            {compareData.map(item=><Menu.Item key={item.key}>{item.label}</Menu.Item>)}</Menu>)
        
        return (
            <Card   >
                  
            <Dropdown overlay={judgeDropMenu}  placement="topCenter">
            <Button style={{width:"80px",background:"transparent"}}>是否</Button>
            </Dropdown>
            <Dropdown overlay={compareDropMenu} placement="topCenter">
                <Button style={{width:"80px",background:"transparent"}}>比较</Button>
            </Dropdown>
            <Button style={{width:"80px",background:"transparent"}}
                onClick={()=> this.onEnumSelect()}
            >枚举</Button>
            <Button style={{width:"80px",background:"#cf1322",color:"#ddd"}}
                onClick={()=> this.onRevert()}
            >取反</Button>
            <div style={{marginTop:"10px"}}>
                <div style={{position: 'absolute',zIndex:"5",margin:"10px"}}>
                    {usedTags.map((item,index)=>{
                        let buttonColor = 'transparent'
                        if(item.key === selectedKey){
                            buttonColor = '#eee'
                        }
                        return (<Row key={item.key}>
                        
                        <Button  key={item.key} 
                            shape="round" 
                            style={{marginLeft:"10px",background:buttonColor}}
                            onClick={()=>{tagStore.setSelectedKey(item.key)}}>{item.fromName}</Button>
                        <Button shape="circle" style={{marginLeft:"10px"}}
                            onClick={()=>{tagStore.setSelectedKey(item.key)}}>{item.operation}</Button>
                        {(item.operationCata === "compare") ?
                        <Input  style={{marginLeft:"10px",width:"100px"}} 
                            onChange={(item)=>{this.onInputChanged(item)}}
                            onFocus={()=>{tagStore.setSelectedKey(item.key)}}
                            value = {item.value}
                        ></Input> 
                        :(item.operationCata === "enum")?
                        <Input  style={{marginLeft:"10px",width:"200px"}} 
                            onChange={(item)=>{this.onInputChanged(item)}}
                            onFocus={()=>{tagStore.setSelectedKey(item.key)}}
                            placeholder="枚举值采取(,)逗号分隔"
                            value = {item.value}
                        ></Input>
                        :""
                        }   
                        <CloseOutlined  style={{marginLeft:"10px"}} 
                            onClick={()=>{this.onDelete(item.key)}}/>
                        
                        </Row>)
                    })}
                    
                </div>
                
                <TextArea  rows={usedTags.length < 5?10:usedTags.length * 2} readOnly/>
            </div>
            
         </Card>
        )
    }

}

export default ActivityCardCanvas